<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <div id="app">
    <cpn></cpn>

    <cpn>
      <template v-slot="textlist">
        <span v-for="item in textlist">{{item}} - </span>
      </template>
    </cpn>

  </div>

  <template id="cpn">
    <div>
      <slot :data="textlist">
        <ul>
          <li v-for="item in textlist">{{item}}</li>
        </ul>
      </slot>
    </div>
  </template>

  <script src="vue.js"></script>
  <script>
    app = new Vue({
      //声明要绑定的id
      el: '#app',
      //数据对象
      data: {

      },
      //计算属性，调用时不需要加小括号
      computed: {

      },
      //定义方法（当前对象内需要加this）
      methods: {

      },
      //注册组件（局部），写法：自定义组件标签名:组件对象
      components: {
        cpn: {
          template: "#cpn",
          data() {
            return {
              textlist: ["测试列表1", "测试列表2", "测试列表3", "测试列表4"],
            }
          },
        }
      }
    })
  </script>
</body>

</html>